<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部logo-->
			<view class="UCenter-bg">
				<image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm"
					mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image>
				<image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="scaleToFill"
					class="gif-wave"></image>
			</view>
			<view class="padding flex text-center text-grey bg-white shadow-warp">
				<view class="flex flex-sub flex-direction solid-right animation-slide-top"
					:style="[{animationDelay: '0.2s'}]">
					<view class="text-xl text-orange">{{personalList.realname}}</view>
					<view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
				</view>

				<view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
					<view class="text-xl text-green">{{personalList.post?personalList.post:'员工'}}</view>
					<view class="margin-top-sm"><text class="cuIcon-news"></text> 职务</view>
				</view>
			</view>
			<view v-if="ishasroom" class="house" >
				<uni-card title="我的住房信息" :is-shadow="false" class="animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<template v-slot:title>
						<uni-list>
							<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="我的住房信息" />
						</uni-list>
					</template>
					<uni-grid :column="2" :showBorder="false"  :square="false">
						<uni-grid-item>
							<text class="text-bold">省份：<span class="text-light">{{userHouse.province}}</span></text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text-bold">地市：<span class="text-light">{{userHouse.city}}</span></text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text-bold">位置：<span class="text-light">{{userHouse.location}}</span></text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text-bold">项目：<span class="text-light">{{userHouse.projectName}}</span></text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text-bold">单元：<span class="text-light">{{userHouse.unit}}</span></text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text-bold">门牌号：<span class="text-light">{{userHouse.roomNo}}</span></text>
						</uni-grid-item>
						<!--
						<uni-grid-item>
							<text class="text-bold">床号：<span class="text-light">{{userHouse.no}}</span></text>
						</uni-grid-item>
						<uni-grid-item>
							<text class="text-bold">面积：<span class="text-light">{{userHouse.area}}m&sup2;</span></text>
						</uni-grid-item>
						-->
					</uni-grid>
				</uni-card>
			</view>

			<!-- 列表list-->
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<!-- <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="cuIcon-favorfill text-yellow"></text>
						<text class="text-grey">收藏</text>
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="cuIcon-redpacket_fill text-red"></text>
						<text class="text-grey">红包</text>
					</view>
				</view>
				<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" @tap="scan">
					<view class="content">
						<text class="cuIcon-scan text-red"></text>
						<text class="text-grey">扫码</text>
					</view>
				</view>-->
				<navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/userdetail"
					:style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="cuIcon-friend text-orange"></text>
						<text class="text-grey">个人信息</text>
					</view>
				</navigator>
				<navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/employeeDetail"
					:style="[{animationDelay: '0.4s'}]">
					<view class="content">
						<text class="cuIcon-card text-cyan"></text>
						<text class="text-grey">职工信息</text>
					</view>
				</navigator>
				<navigator class="cu-item arrow animation-slide-bottom" url="/pages/zhzf/qualification"
					:style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="cuIcon-form text-olive"></text>
						<text class="text-grey">我的资质</text>
					</view>
				</navigator>
				<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.6s'}]" @click="openExit"
					hover-class="none">
					<view class="content">
						<text class="cuIcon-exit text-red"></text>
						<text class="text-grey">退出</text>
					</view>
				</view>
			</view>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog :duration="2000" :before-close="true" @close="close" @confirm="confirmExit">
					确定退出登录吗？
				</uni-popup-dialog>
			</uni-popup>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import {mapActions} from "vuex"
	export default {
		name: "people",
		data() {
			return {
				personalList: {
					avatar: '',
					realname: '',
					username: '',
					post: ''
				},
				userHouse: {},
				positionUrl: '/sys/position/list',
				departUrl: '/base/znzfEmployee/queryMyRoomInfoByUserId',
				userUrl: '/sys/user/queryById',
				postUrl: '/sys/position/queryByCode',
				userId: '',
				id: '',
				extraIcon1: {
					color: '#f37b1d',
					size: '22',
					type: 'home',
				},
				ishasroom: false,
			};
		},
		mounted() {
			this.userId = this.$store.getters.userid;
			this.load()
		},
		watch: {
			// cur: {
			// 	immediate: true,
			// 	handler() {
			// 		console.log('watch', this.cur)
			// 		this.userId = this.$store.getters.userid;
			// 		this.load()
			// 	},
			// },
		},
		methods: {
			...mapActions(["Logout"]),
			scan() {
				console.log("进来了")
				// #ifndef H5
				uni.scanCode({
					success: function(res) {
						console.log('条码res：' + res);
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
				// #endif
				// #ifdef H5
				this.$tip.alert("暂不支持")
				// #endif
			},
			load() {
				if (!this.userId) {
					return;
				}
				this.$http.get(this.userUrl, {
					params: {
						id: this.userId
					}
				}).then(res => {
					console.log(this.userUrl, res)
					if (res.data.success) {
						let perArr = res.data.result
						let avatar = (perArr.avatar && perArr.avatar.length > 0) ? api.getFileAccessHttpUrl(perArr
							.avatar) : '/static/avatar_boy.png'
						this.personalList.avatar = avatar
						this.personalList.realname = perArr.realname
						this.personalList.username = perArr.username
						this.personalList.depart = perArr.departIds
						this.getpost(perArr.post)
						this.getHouse()
					}
				}).catch(err => {
					console.log(err);
				});

			},
			getpost(code) {
				if (!code || code.length == 0) {
					this.personalList.post = '员工'
					return false;
				}
				this.$http.get(this.postUrl, {
					params: {
						code: code
					}
				}).then(res => {
					console.log("postUrl", res)
					if (res.data.success) {
						this.personalList.post = res.data.result.code
					}
				}).catch(err => {
					console.log(err);
				});

			},
			getHouse(){
				this.$http.get(this.departUrl,{
					params:{
						userId:this.userId
					}
				}).then(res =>{
					console.log(this.departUrl, res);
					if (res.data.success) {
						this.ishasroom = true;
						this.userHouse = res.data.result
					}else{
						this.ishasroom = false;
					}
				}).catch(err => {
					console.log(err);
				});
			},
			openExit() {
				this.$refs.popup.open()
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			// 确认退出登录
			confirmExit() {
				console.log("退出登录")
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.logout();
				this.$refs.popup.close()
			},
			logout() {
				this.Logout().then(res => {
					console.log(res);
					if (res.data.success) {
						this.$tip.success('注销成功!')
						uni.clearStorageSync()
						uni.navigateTo({
							url: '/'
						})
					} else {
						this.$tip.alert(res.errMsg);
					}

				})
			}
		}
	}
</script>

<style lang='scss'>
	.UCenter-bg {
		/* #ifdef MP-WEIXIN */
		background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
		/* #endif */
		/* #ifndef MP-WEIXIN */
		background-image: url('/static/blue.png');
		/* #endif */
		background-size: cover;
		height: 400rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}

	.house .uni-card {
		border-radius: 15px !important;
		border: 0 !important;
	}
</style>
